<!DOCTYPE html>
<html>
<head>
	
	<title>Light life Admin Panel | Widgets</title>
	<meta name="description" content="">
    <meta name="author" content="vladproduction.ru">
    <link rel="shortcut icon" href="images/favicon.ico" />

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cuprum" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/fancybox.css" media="screen"  />
    <link rel="stylesheet" href="./css/jquery-ui-1.8.16.custom.css" media="screen"  />
    <link rel="stylesheet" href="./css/fullcalendar.css" media="screen"  />
    <link rel="stylesheet" href="./lib/elfinder/css/elfinder.css" media="screen" />
    <link rel="stylesheet" href="./lib/editor/jquery.wysiwyg.css" media="screen" />
    <link rel="stylesheet" href="./lib/editor/default.css" media="screen" />
    <link rel="stylesheet" href="./lib/player/css/style.css">
    <link rel="stylesheet" href="./css/tipTip.css" media="screen" />
    <link rel="stylesheet" href="./css/chosen.css" media="screen"  />
    <link rel="stylesheet" href="./css/colorpicker.css" type="text/css" />
    <link rel="stylesheet" href="./css/tables.css" media="screen"  />
    <link rel="stylesheet" href="./css/jquery.jgrowl.css" media="screen"  />
    
    <!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="./lib/jquery-ui-1.8.16.custom.min.js"></script>
    
    <script type="text/javascript" src="./lib/ddaccordion.js"></script>
	<script type="text/javascript" src="./lib/jquery.flot.min.js"></script>
    <script type="text/javascript" src="./lib/jquery.flot.pie.js"></script>
    <script type="text/javascript" src="./lib/jquery.flot.orderBars.js"></script>
    <script type="text/javascript" src="./lib/fancybox/fancybox.js"></script>
    <script type="text/javascript" src="./lib/fullcalendar.min.js"></script>
    <script src="./lib/elfinder/js/elfinder.min.js" charset="utf-8"></script>
    <script src="./lib/editor/jquery.wysiwyg.js" charset="utf-8"></script>
    <script src="./lib/editor/wysiwyg.image.js" charset="utf-8"></script>
	<script src="./lib/editor/default.js" charset="utf-8"></script>
    <script src="./lib/editor/wysiwyg.link.js" charset="utf-8"></script>
    <script src="./lib/editor/wysiwyg.table.js" charset="utf-8"></script>
    <script type="text/javascript" src="./lib/player/jquery-jplayer/jquery.jplayer.js"></script>
    <script type="text/javascript" src="./lib/player/ttw-video-player-min.js"></script>
    <script src="./lib/jquery.tipTip.minified.js"></script>
    <script src="./lib/forms.js"></script>
    <script src="./lib/chosen.jquery.min.js"></script>
    <script src="./lib/autoresize.jquery.min.js"></script>
    <script type="text/javascript" src="./lib/colorpicker.js"></script>
	<script type="text/javascript" src="./lib/validation.js"></script>
    <script src="./lib/jquery.dataTables.min.js"></script>
    <script src="./lib/jquery.jgrowl_minimized.js"></script>
    <script src="./lib/slidernav-min.js"></script>
    <script src="./lib/formToWizard.js"></script><script>$(document).ready(function(){ $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' }) });</script>
    
    
    <script type="text/javascript" src="./lib/functions.js"></script>

<meta charset="UTF-8"></head>

<body>
<section id="main-content">
 <header>
	  <div class="centered">
      
	  <h1><a href="./dashboard.html" class="logo">Light life Admin Panel</a></h1>
 
 	  <ul class="menu-head">
      	   <li><a href="#"><span id="visit-icon">Visit site</span></a></li>
      	   <li><a href="#"><span id="news-icon">News</span></a></li>
           <li><a href="#"><span id="statistics-icon">Statistics</span></a></li>
           <li><a href="#"><span id="users-icon">Users</span></a></li>
      </ul>
            
      <nav>
        <ul>
            <li id="login">
                <a id="login-trigger" href="#">
 					<span id="user-panel-check"></span>
  					<span id="user-panel-title">Welcome, <strong>John Doe</strong></span>
                    <span id="user-panel"></span>
                </a>
                <div id="login-content">
                  <ul>
                  <li><a href="#"><span>Settings</span> <img src="./images/setting.png" alt=""></a></li>
                  <li><a href="#"><span>Help</span> <img src="./images/help.png" alt=""></a></li>
                  <li><a href="./index.html"><span>Log Out</span> <img src="./images/logout.png" alt=""></a></li>
                  </ul>
               </div>                     
            </li> 
        </ul>
      </nav>     
       </div>
 </header>
 
  <section id="content">
  <div class="centered">  

  
  <div class="main">
          
        <div class="speedbar">
         <a href="#">Light life Admin Panel</a> &rsaquo; <a href="#">Widgets</a>
        </div>
        
  	   <!--Reports-->
       <ul class="reports">
           <li><a href="#" class="report"><span class="add"></span>New news</a></li>    
           <li><a href="#" class="report"><span class="add"></span>New post</a></li> 
           <li><a href="#" class="report"><span class="add"></span>New users</a></li> 
           <li><a href="#" class="report last-report"><span class="add"></span>New messages</a></li> 
        </ul>
        
        <!--Reports end-->
     <!--Users-->
        <div class="grid-2">
           <div class="title-grid">Users</div>
           <div class="content-gird">
          	    
                <div class="user">
                	<div class="user-avatar"><img src="./images/avatar_message_1.png" alt=""></div>
                    <div class="user-info">
                    <div class="user-name">John Doe</div>
                    <div class="user-email">youremail@domain.com</div>
                    <div class="user-link"><a href="#">Account Settings</a> | <a href="#">Delete</a></div>
                    </div>
                    <div class="clear"> </div>
                </div>
                <div class="user">
                	<div class="user-avatar"><img src="./images/avatar_message_1.png" alt=""></div>
                    <div class="user-info">
                    <div class="user-name">John Doe</div>
                    <div class="user-email">youremail@domain.com</div>
                    <div class="user-link"><a href="#">Account Settings</a> | <a href="#">Delete</a></div>
                    </div>
                    <div class="clear"> </div>
                </div>	
                <div class="user">
                	<div class="user-avatar"><img src="./images/avatar_message_1.png" alt=""></div>
                    <div class="user-info">
                    <div class="user-name">John Doe</div>
                    <div class="user-email">youremail@domain.com</div>
                    <div class="user-link"><a href="#">Account Settings</a> | <a href="#">Delete</a></div>
                    </div>
                    <div class="clear"> </div>
                </div>	
                <div class="user">
                	<div class="user-avatar"><img src="./images/avatar_message_1.png" alt=""></div>
                    <div class="user-info">
                    <div class="user-name">John Doe</div>
                    <div class="user-email">youremail@domain.com</div>
                    <div class="user-link"><a href="#">Account Settings</a> | <a href="#">Delete</a></div>
                    </div>
                    <div class="clear"> </div>
                </div>	
                <div class="user">
                	<div class="user-avatar"><img src="./images/avatar_message_1.png" alt=""></div>
                    <div class="user-info">
                    <div class="user-name">John Doe</div>
                    <div class="user-email">youremail@domain.com</div>
                    <div class="user-link"><a href="#">Account Settings</a> | <a href="#">Delete</a></div>
                    </div>
                    <div class="clear"> </div>
                </div>	
             
                <div class="clear"> </div>
            </div>
        </div>
		<!--Users end-->
        

        
        <!--Accordion-->
        <div id="accordion" class="accordion">
          <h3><a>Accordion</a></h3>
          <div>Lorem ipsum dolor sit amet.</div>
          <h3><a>Accordion</a></h3>
          <div>Lorem ipsum dolor sit amet.</div>
          <h3><a>Accordion</a></h3>
          <div>Lorem ipsum dolor sit amet.</div>
          <h3><a>Accordion</a></h3>
          <div>Lorem ipsum dolor sit amet.</div>
		</div>
		<!--Accordion end-->
        
		<!--Website statistic-->
        <div class="grid-2 last right">
           <div class="title-grid">Website statistic</div>
           <div class="content-gird">
          	    
                <table class="display" >
                <thead>
                    <tr>
                        <th class="th_date">Amount</th>
                        <th class="th_status">Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="item">
                        <td class="amount"><a href="#">1,056</a></td>
                        <td><span class="published">Views</span></td>
                    </tr>
                    <tr class="item">
                        <td class="amount"><a href="#">2,587</a></td>
                        <td><span class="published">Pageviews</span></td>
                    </tr>
                    <tr class="item">
                        <td class="amount"><a href="#">91%</a></td>
                        <td><span class="published">Bounce Rate</span></td>
                    </tr>
                    <tr class="item">
                        <td class="amount"><a href="#">01:32</a></td>
                        <td><span class="published">Avg. Time on Site</span></td>
                    </tr>
                    <tr class="item">
                        <td class="amount"><a href="#">63%</a></td>
                        <td><span class="published">New Visits</span></td>
                    </tr>
                    <tr class="item">
                        <td class="amount"><a href="#">37%</a></td>
                        <td><span class="published">Returning Visitor</span></td>
                    </tr>
                    <tr class="item">
                        <td class="amount"><a href="#">164</a></td>
                        <td><span class="published">Ticket</span></td>
                    </tr>
                    </tbody>
                    </table>
             
               
            </div>
        </div>
		<!--Website statistic end-->
        
       
        <!--ToolTip-->
        <div class="grid-2">
           <div class="title-grid">ToolTip</div>
           <div class="content-gird">
          	    
           <a href="#" title="Lorem ipsum dolor sit amet." class="button-a blue tip-bottom"><span>Tip bottom</span></a>
           <a href="#" title="Lorem ipsum dolor sit amet." class="button-a blue tip-top"><span>Tip top</span></a>
           <a href="#" title="Lorem ipsum dolor sit amet." class="button-a blue tip-left"><span>Tip left</span></a>
           <a href="#" title="Lorem ipsum dolor sit amet." class="button-a blue tip-right"><span>Tip right</span></a>
               
            </div>
        </div>
        <!--ToolTip end--> 
        
        <!--Pop-up notifications end--> 
         <div class="grid-2 last">
           <div class="title-grid">Pop-up notifications</div>
           <div class="content-gird">
          	    
                    <button type="submit" class="button-a blue" onclick="$.jGrowl('One more message...');"><span>Normal</span></button>
                    <button type="submit" class="button-a blue" onclick="$.jGrowl('Stick this!', { sticky: true });"><span>Sticky</span></button>
                    <button type="submit" class="button-a blue" onclick="$.jGrowl('A message with a header', { header: 'Important' });"><span>With header</span></button>
                    <button type="submit" class="button-a blue" onclick="$.jGrowl('A message that will live a little longer.', { life: 10000 });"><span>Longer life</span></button>
            </div>
        </div>
		<!--Pop-up notifications end--> 
        
        
            <div class="clear"></div>
            
          <!--Tabs-->
          <div class="grid-1 tab" id="tabs">
            <div class="title-grid tabs">
                <ul class="tabNavigation">
                    <li><a href="#tabs-1">tab 1</a></li>
                    <li><a href="#tabs-2">tab 2</a></li>
                    <li><a href="#tabs-3">tab 3</a></li>   
                </ul>
             </div>
            <div class="content-gird">   
                <div id="tabs-1">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                </div>
                <div id="tabs-2">
					text 2
                </div>
                <div id="tabs-3">
					text 3
                </div>
                
              </div> 
           </div>
		 <!--Tabs end-->
             
        
   </div><!-- END MAIN-->
  
   <!-- SIDEBAR -->
   <div class="sidebar">
   
   
   <div id="search">
          <form action="#">
         	 <input type="text" placeholder="Search" value="">
             <div class="submit">
				<input type="image" src="./images/px.gif" title="Search" alt="Search" />
			 </div>
          </form>
   </div>
   
   <ul class="menu">
		<li class="expand">
			<a href="#"><span class="four-prong icon">General</span><span class="num">5</span></a>
			<ul class="acitem">
				<li><a href="./dashboard.html"><span class="dashboard icon">Dashboard</span></a></li>
				<li><a href="./charts.html"><span class="charts icon">Charts</span></a></li>
                <li><a href="./gallery.html"><span class="gallery-pic icon">Image Gallery</span></a></li>
                <li><a href="./calendar.html"><span class="cal icon">Calendar</span></a></li>
                <li><a href="./messages.html"><span class="conversations icon">Page Messages</span></a></li>
			</ul>
		</li>
		<li>
			<a href="#"><span class="four-prong icon">Styling</span><span class="num">5</span></a>
			<ul class="acitem">
            	<li><a href="./forms.html"><span class="forms icon">Form Styling</span></a></li>
       			<li><a href="./table.html"><span class="tables icon">Table Styling</span></a></li>
                <li><a href="./grid.html"><span class="grids icon">Grid Styling</span></a></li>
            	<li><a href="./buttons.html"><span class="buttons-icons icon">Buttons & Icons</span></a></li>
				<li><a href="./typo.html"><span class="typo icon">Typo</span></a></li>	
			</ul>
		</li>
		<li>
			<a href="#"><span class="four-prong icon">Plugins</span><span class="num">6</span></a>
			<ul class="acitem">
                <li><a href="./widgets.html"><span class="invoice icon">Widgets</span></a></li>
                <li><a href="./plaeyr.html"><span class="youtube icon">HTML5 Player</span></a></li>
                <li><a href="./editor.html"><span class="w-editor icon">WYSIWYG Editor</span></a></li>	
       		    <li><a href="./file.html"><span class="files icon">File Manager</span></a></li>
                <li><a href="./step.html"><span class="steps icon">Step By Step Wizard</span></a></li>
                <li><a href="./contact.html"><span class="connection icon">Contact List</span></a></li>
			</ul>
		</li>
		<li>
			<a href="#"><span class="four-prong icon">Errore Page</span><span class="num">3</span></a>
			<ul class="acitem">
                <li><a href="./404.html"><span class="errors icon">Error 404</span></a></li>
                <li><a href="./500.html"><span class="errors icon">Error 500</span></a></li>
                <li><a href="./503.html"><span class="errors icon">Error 503</span></a></li>
			</ul>
		</li>
	</ul>	
    
	</div>
 	<!-- SIDEBAR -->

    
  
    </div>
  </section>


<div class="empty"></div>
</section>   <!--end main-content-->     

 <footer>
      <div class="info-footer">
        	<div id="left">
            <ul id="menu-footer">
            	<li><a href="#">Feedback</a></li>
                <li><a href="#">Support</a></li>
            </ul>
            <p>Copyright В© 2011-2012  Light Life.</p>
            <p>Follow <a href="http://themeforest.net/user/dimka_ua_kh">@dimka_ua_kh</a></p> 

	  </div>
            <div id="right">
            	<h1><a href="./dashboard.html" class="logo">Light life Admin Panel</a></h1>
            </div>
      </div>
 </footer>
 
</body>
</html>